<template>
   <div>
        <div class="top clearfix">
                <div class="one" >
                    查看 <el-select v-model="value1" placeholder="请选择">
                        <el-option
                        v-for="item in options1"
                        :key="item.value1"
                        :label="item.label"
                        :value="item.value1">
                        </el-option>
                    </el-select>
                </div>
                    <div class="two" >
                    年份 <el-select v-model="value2" placeholder="请选择">
                        <el-option
                        v-for="item in options2"
                        :key="item.value2"
                        :label="item.label"
                        :value="item.value2">
                        </el-option>
                    </el-select>
                </div>
                <el-button  class="submit" @click="comfirm()">确定</el-button>
        </div>
        <div class="center_contant">
            <ul v-for="info in informations" class="information">
                    <li class="neirong">
                        <div class="xinxi">{{info.title}}</div>
                        <div class="infotime">{{info.date}}</div>
                    </li>                    
            </ul>
        </div>
       <el-pagination
               @current-change="handleCurrentChange"
               layout="prev, pager, next"
               :total="total" :page-size="15">
       </el-pagination>
   </div>
</template>
<script type="text/javascript">
export default {
  data(){
        return {
                options1: [{
                value1: '全部',
                label: '全部'
                }, {
                value1: '浏览最多',
                label: '浏览最多'
                }, {
                value1: '评论最多',
                label: '评论最多'
                }],
            options2: [{
                value2: '2014',
                label: '2014'
                }, {
                value2: '2015',
                label: '2015'
                }, {
                value2: '2016',
                label: '2016'
                }, {
                value2: '2017',
                label: '2017'
            }],
            value1: '',
            value2: '',
            total:0,
            informations: [/*{
                xinxi: '2014年荣获中国十佳慈善机构',
                infotime: '2014.5.1'
            },{
                xinxi: '广东省爱心基金合作伙伴',
                infotime: '2015.5.1' 
            },{
                 xinxi: '2016荣获广东省最佳慈善机构',
                infotime: '2016.5.1'
            },{
                xinxi: '帮助超过10000人次，成为广东省最具影响力公益网站',
                infotime: '2017.5.1'
            }*/]
        }
  },
    methods: {
        handleCurrentChange(val){
            this.fetchData(val)
        },
        comfirm(){
            this.fetchData(1);
            this.fetchPage();
        },
        fetchData(page){
            this.http.get('/users/donations/certificate?page=' + page+'&&most='+this.value1+'&&year='+this.value2).then((res) => {
                this.informations = res.data;
            })
        },
        fetchPage(){
            this.http.get('/users/count/certificate?year='+this.value2).then((res) => {
                this.total = res.data;
                console.log(res.data);
            })
        },
    },
    mounted(){
        this.fetchData(1)
        this.fetchPage();
    }
}
</script>
<style>
    .el-pagination {
        margin-top: 28px;
        margin-left: 28px;

    }
  .content .right .top {

        font-size: 14px;
        font-weight: 800;

    }

    .content .one, .content .two {
        float: left;
        padding-left: 10px;
        padding-right: 13px;
        line-height: 28px;
        border-right: 1px solid #E5E3E3;
    }
    .center_contant{
        padding-top: 20px;
    }
    .neirong{
        width: 100%;
        height: 40px;
        border-bottom: 1px dashed #E5E3E3;
    }
    .xinxi{
        float: left;
       line-height:40px;
    }
    .infotime{
        float: right;
         line-height:40px;
    }
</style>